<script setup>
import { ref } from 'vue'
import { RouterView } from 'vue-router'

const navItems = ref([
  { name: '路线设计', path: '/' },
  { name: '运营数据', path: '/stats' },
  { name: '线路规划', path: '/planning' }
])
</script>

<template>
  <div class="app-container">
    <nav class="nav-bar">
      <div class="logo">
        <img src="https://img.freepik.com/free-vector/subway-train-logo_23-2147492720.jpg" alt="地铁模拟器" />
        <span>城市地铁路线模拟器</span>
      </div>
      <div class="nav-items">
        <router-link 
          v-for="item in navItems" 
          :key="item.path"
          :to="item.path"
          class="nav-item"
          active-class="active"
        >
          {{ item.name }}
        </router-link>
      </div>
    </nav>
    <main class="main-content">
      <RouterView />
    </main>
  </div>
</template>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #f8fafc;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 60px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo img {
  height: 40px;
  width: 40px;
  border-radius: 8px;
}

.logo span {
  font-size: 22px;
  font-weight: 600;
  color: #0f172a;
  background: linear-gradient(45deg, #0f172a, #334155);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-items {
  margin-left: auto;
  display: flex;
  gap: 40px;
}

.nav-item {
  text-decoration: none;
  color: #666;
  font-size: 16px;
  padding: 8px 20px;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.nav-item:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.1);
}

.nav-item.active {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.1);
  font-weight: 500;
}

.main-content {
  padding: 92px 60px 30px;
  max-width: 1800px;
  margin: 0 auto;
}
</style>
